<template>
	<view class="observe-content">
		<view class="observe-top">

			<rf-navbar title="转交历史" @click="onBack"></rf-navbar>
		</view>
		<view class="observe-bottom">
			<u-list v-if="data.length>0">
				<u-list-item v-for="(item, index) in data">
					<view class="list-cell" @click="childDetails" :key="index">

						<view class="cell-icon">
							<rf-avatar :avatarUrl="item.headSculpture" :gender="item.childSex"></rf-avatar>
						</view>
						<view class="cell-text">
							<text>转交人</text>
							<text
								style="margin-top: 20rpx;margin-left: 10rpx; font-weight: bold;">{{ item.childName }}</text>
						</view>
						<view style="flex: 1;text-align: center;">
							<text>{{ item.date }}</text>
							<image class="icon-care" style="width: 40rpx; height: 40rpx; margin-top: 20rpx;"></image>
						</view>
						<view style="text-align: end;">
							<text style="">接收人</text>
							<text
								style="margin-top: 20rpx;margin-right: 10rpx; font-weight: bold;">{{ item.teacherName }}</text>
						</view>
					</view>

				</u-list-item>
			</u-list>
			<view class="" v-else>
				<u-empty mode="car" :marginTop="50" text="暂无数据" icon="/static/images/common/empty.png"></u-empty>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getTransferHistory,
	} from "@/api/user.js"

	export default {
		data() {
			return {
				total: 0,
				pagination: {
					pageSize: 10, // 步长
					pageNum: 1, // 页码
				},

				data: [],

			};
		},
		onLoad() {
			this.getlist()
		},

		methods: {
			onBack() {
				uni.navigateBack();
			},
			formatArray(arr) {
				return arr.map(item => {

					const date = new Date(item.updateTime);
					const timeFormat = uni.$u.timeFormat;
					let timeValue = timeFormat(date, 'yyyy-mm-dd hh:MM:ss');

					return {
						childId: item.childId,
						headSculpture: item.headSculpture,
						childName: item.childName,
						childSex: item.childSex,
						teacherName: item.teacherName,
						date: timeValue,
					}
				})
			},
			getlist() {
				const data = {
					"pageSize": this.pagination.pageSize,
					"pageNum": this.pagination.pageNum,
					"orderByColumn": "",
					"isAsc": "",
				};
				getTransferHistory().then(res => {
					this.pagination.pageNum++;
					this.total = res.data.total
					this.data = this.data.concat(this.formatArray(res.data.rows))
					console.log("this.data: " + JSON.stringify(this.data));
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.stopPullDownRefresh()
				})
			},

			back() {
				uni.navigateBack();
			},

			// 孩子详情
			childDetails() {
				uni.navigateTo({
					url: '/pages/childFile/childFile'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep.u-input__content {
		background-color: #f4f7f9;
		padding: 10rpx;
		border-radius: 50rpx;
		width: 400rpx;
	}

	::v-deep.uni-input-input:disabled {
		background-color: #f4f7f9;
	}

	::v-deep.u-form-item__body__right__content {
		background-color: #f4f7f9;
	}

	::v-deep.u-input {
		background-color: #f4f7f9;
	}

	::v-deep.u-border {
		border-color: #f4f7f9 !important;
	}

	::v-deep.u-form-item__body__left__content__label {
		margin: 0 0 14rpx 0;
		font-weight: 500;
		color: #000000;
		font-size: 32rpx;
	}

	.u-index-anchor {
		background-color: #f5f6fa !important;
	}

	.observe-content {
		position: fixed;
		min-height: calc(100vh);
		background-color: #fff;
		width: 100%;

		.observe-top {
			width: 100%;
			height: 564rpx;
			background: url('../../static/icons/toubu.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: relative;
			text-align: center;
		}

		.observe-bottom {
			height: calc(100vh - 264rpx);

			position: relative;
			top: -400rpx;

			.list-cell {
				display: flex;
				align-items: center;
				box-sizing: border-box;

				margin: 0rpx 32rpx;
				padding: 10rpx 20rpx;

				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 28rpx;
				margin-top: 20rpx;
				background-color: #fff;

				height: 164rpx;
				box-shadow: 0px 4px 14px 0px rgba(31, 44, 65, 0.13);
				border-radius: 20rpx;

				text {
					display: block;
				}

				.cell-text {
					margin-left: 20rpx;

					.cell-text-top {
						display: flex;
						font-size: 32rpx;
						color: #3a3d4b;
					}

					.cell-text-bom {
						display: flex;
						margin: 10rpx 0rpx;
						font-weight: 400;
						color: #77798d;
					}
				}
			}
		}

		.popup {
			width: 100%;
			height: 626rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
		}
	}

	.foot {
		position: fixed;

		bottom: 0rpx;
		left: 0;
		width: 750rpx;
		height: 180rpx;
		background: #ffffff;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.02), 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.02);


		.container {
			top: 0rpx;
			height: 112rpx;
			padding: 0rpx 32rpx;
			display: flex;
			align-items: center;

			.input {
				margin: 0rpx 0rpx 0rpx 32rpx;
				height: 88rpx;
				background-color: #F4F7F9;
				border-radius: 44rpx;
				padding: 0rpx 180rpx 0rpx 20rpx;
				flex: 2;
			}

			.btn {
				position: absolute;
				top: 16rpx;
				right: 36rpx;
				width: 174rpx;
				height: 80rpx;
				background: #58c866;
				border-radius: 44rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
			}
		}


	}
</style>